<template>
  <div class="manage">
    <!-- <h1>图书管理</h1> -->

    <!-- 图书列表 -->
    <div class="van-cell-group">
      <table class="book-table">
        <thead>
          <tr>
            <th>书名</th>
            <th>作者</th>
            <th>库存</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(book, index) in books" :key="book.id">
            <td>{{ book.title }}</td>
            <td>{{ book.author }}</td>
            <td>{{ book.copies }}</td>
            <td>
              <van-button size="small" type="danger" @click="deleteBook(index)">删除</van-button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 添加图书表单 -->
    <van-button type="primary" block @click="openAddBookDialog">添加图书</van-button>
    <van-popup v-model="show" position="center" :close-on-click-overlay="false">
      <div class="add-form van-cell-group">
        <h2>添加图书</h2>
        <van-field v-model="newBook.title" label="书名" placeholder="请输入书名" />
        <van-field v-model="newBook.author" label="作者" placeholder="请输入作者" />
        <van-field v-model.number="newBook.copies" label="库存" placeholder="请输入库存数量" type="number" />
        <van-button type="primary" block @click="addBook">提交</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Button, Field, Popup, Toast } from 'vant';

export default {
  name: 'Manage',
  components: {
    [Button.name]: Button,
    [Field.name]: Field,
    [Popup.name]: Popup,
    [Toast.name]: Toast
  },
  data() {
    return {
      books: [
        { id: 1, title: "Python编程", author: "John Doe", copies: 4 },
        { id: 2, title: "历史的秘密", author: "Jane Smith", copies: 3 },
        { id: 3, title: "宇宙探索", author: "Emily Brown", copies: 2 },
        { id: 4, title: "健康生活", author: "Mike Johnson", copies: 5 },
        { id: 5, title: "数学之美", author: "Sarah Lee", copies: 4 },
        { id: 6, title: "艺术欣赏", author: "David White", copies: 3 },
        { id: 7, title: "编程入门", author: "Alice Green", copies: 2 },
        { id: 8, title: "科幻世界", author: "Frank Black", copies: 5 },
        { id: 9, title: "自然奇观", author: "Grace Blue", copies: 4 },
        { id: 10, title: "音乐之声", author: "Tom Red", copies: 3 }
      ],
      newBook: {
        title: '',
        author: '',
        copies: 0
      },
      show: false,
    };
  },
  methods: {
    openAddBookDialog() {
      this.show = true;
    },
    addBook() {
      const book = this.newBook;
      if (!book.title || !book.author || book.copies <= 0) {
        this.$toast.fail('请填写完整信息');
        return;
      }
      const newId = Math.max(...this.books.map(b => b.id)) + 1;
      this.books.push({
        id: newId,
        ...book
      });
      this.$toast.success('添加成功');
      this.show = false;
      this.newBook = { title: '', author: '', copies: 0 };
    },
    deleteBook(index) {
      this.books.splice(index, 1);
      this.$toast.success('删除成功');
    }
  }
};
</script>

<style scoped>
.manage {
  padding: 16px;
}

.book-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

.book-table th,
.book-table td {
  border: 1px solid #ebedf0;
  padding: 12px;
  text-align: center;
}

.book-table th {
  background-color: #f7f8fa;
}

.add-form {
  /* margin-top: 30px; */
  /* padding-top: 20px; */
  padding: 20px;
  min-width: 350px;
}
</style>